<template>
  <el-row class="container">
    <el-col :span="24" class="header">
      <aside class="logo">
        <img src="https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png" />
        <h1>TEMPadmin</h1>
        <!--  -->
      </aside>
      <section :class="[isCollapse ? 'conten-header-close' : '','conten-header']" >
        <el-col :span="24" class="breadcrumb-container">
          <el-col :span="1" style="padding: 0; height: 60px;">
             <div class="grid-content bg-purple titlename">
              <span class="menuIcon" v-if="isCollapse" @click="toggleCollapse">
                <i class="icon iconfont icon-zhankai"></i>
              </span>
              <span class="menuIcon" v-if="!isCollapse" @click="toggleCollapse">
                <i class="icon iconfont icon-shouqi"></i>
              </span>
            </div>
          </el-col>
          <el-col :span="14" style="padding: 0;height: 60px;">
            <el-breadcrumb separator="/" class="breadcrumb-inner">
              <el-breadcrumb-item v-for="item in $route.matched" :key="item.path" :to="{ path: item.path == '' ? '/home' : item.path}">{{ item.name }}</el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
          <el-col :span="2" style="padding: 0; height: 60px;">
 
          </el-col>
          <el-col :span="1" style="padding: 0; height: 60px;">

          </el-col>
          <el-col :span="2" style="padding: 0; height: 60px;">
           
          </el-col>
          <el-col :span="2" style="padding: 0; height: 60px;">
           
          </el-col>
          <el-col :span="2" style="padding: 0; height: 60px;">
              <el-dropdown trigger="click">
                  <span class="logoutIco el-dropdown-link">
                    <img src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80" />
                    <i class="el-icon-caret-bottom"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <div @click="changePassword">
                        <el-dropdown-item >修改密码</el-dropdown-item>
                    </div>
                    <div @click="logout()">
                        <el-dropdown-item >退出</el-dropdown-item>
                    </div>
                  </el-dropdown-menu>
              </el-dropdown>
          </el-col>
        </el-col>
      </section>
    </el-col>
    <el-col :span="24" class="main">
      <aside  :class="[isCollapse ? 'test1-close' : '','test1']">
         <el-menu
          :collapse="isCollapse"
          :default-active="activeMenu"
          unique-opened
          router
          class="el-menu-vertical-demo"
          mode="vertical"
         
        >
          <template v-for="(item,index) in menuList ">
            <el-submenu  :index="index+''" :key="item.resourceName" >
              <template slot="title"><i :class="['icon iconfont',item.resourceIcon]"></i>{{item.resourceName}}</template>
                <template v-for="(item,index) in item.children ">
                  <el-submenu v-if="item.children && item.children.length" :index="index+''" :key="item.resourceName" >
                    <template slot="title">{{item.resourceName}}</template>
                        <el-menu-item 
                          v-for="(node) in item.children"
                          :key="node.resourceUrl"
                          :index="node.resourceUrl"
                          style="padding-left:20px;"
                        ><i :class="['icon iconfont',item.resourceIcon]"></i>{{node.resourceName}}
                        </el-menu-item>
                  </el-submenu>
                  <el-menu-item
                    v-else
                    :index="item.resourceUrl"
                    :key="item.resourceUrl"
                  ><i :class="['icon iconfont',item.resourceIcon]"></i>{{item.resourceName}}
                  </el-menu-item>
                </template>
            </el-submenu>
          </template>
        </el-menu> 
      </aside>
      <ml-change-password ref="changePassword"></ml-change-password>
      <!--右侧-->

      <section :class="[isCollapse ? 'content-container-close' : '','content-container']" ref="searchBar">
        <el-col :span="24" class="breadcrumb-container">
    
              <el-tag
                v-for="tag in tags"
                :key="tag.name"
                @close="handleClose(tag)"
                closable
                :class="{'activetag':$route.path == tag.path}"
                >
                <router-link :to="tag.path">{{tag.name}}</router-link>
              </el-tag>
   
        </el-col>
        <el-col :span="24" class="content-wrapper">
          <transition name="fade-transform" mode="out-in">
            <router-view></router-view>
          </transition>
        </el-col>
      </section>
     
      <transition name="el-fade-in-linear">
        <div class="spin-container" v-if="loading">
          <div class="spin1">
            <div class="spin2"></div>
            <div class="spin3"></div>
          </div>
        </div>
      </transition>
    </el-col>
  </el-row>
</template>
<script>
import path from 'path'
import enums from '../common/Enum';
import DataUtil from "../common/dataUtil";
import mlChangePassword from "../components/_changePassword.vue";
import { getRoutes,logout } from "@/api";
import waves from '@/directive/waves/index.js'
export default {
  directives: {
      waves
  },
  data() {
    this.onlyOneChild = null
    return {
      loading: true,
      infoForm: "",
      isCollapse: false,
      mList : enums.menuList,
      menuList : [],
    };
  },
  computed: {
    /////当前激活菜单路由
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    },
    tags(){
      const routelist = this.$store.getters.getUserListIndex;
      const route = this.$route;
            this.$store.dispatch("getUserListIndex",route);
            return routelist;
    } 
  },
  methods: {
    /////删除面包屑菜单
    handleClose(tag) {
      const tags = this.tags;
      for (const [i, v] of tags.entries()) {
        if (v.name === tag.name) {
          tags.splice(i, 1)
          break
        }
      }
    },
    /////修改密码
    changePassword() {
      this.$refs.changePassword.show();
    },
    //退出登录
    logout() {
      let formData = {
        // userName : DataUtil.userInfo(),
      }
      this.$confirm("确认退出登录吗?", "提示", {})
        .then(() => {
            logout(formData).then(response => {
              if ('0' == response.code) {
                  this.$router.push("/login");
                  DataUtil.sid("");
                  DataUtil.userInfo("");
                  DataUtil.menus("");
              } else {
                this.$message.error(response.message);
              }
            }, response => {
            });
        })
        .catch(() => {});
    },
    toggleCollapse() {
      if (!this.isCollapse) {
        this.isCollapse = !this.isCollapse;
      } else {
        this.isCollapse = false;
      }
    },
    /////获取菜单列表
    getRoutes() {
      let formData = {
        // userName : DataUtil.userInfo(),
      }
      let menuList = this.menuList
      getRoutes(formData).then(response => {
        if ('0' == response.code) {
          // let  mList = response.data;
          //   menuList.concat(mList);
          //   console.log(mList)
          //   console.log(menuList)
            this.menuList = response.data;
            DataUtil.menus(JSON.stringify(response.data));
        } else {
          this.$message.error(response.message);
        }
      }, response => {

      });
      this.infoForm = "";
    },
    openFullScreen() {
      setTimeout(() => {
        this.loading = false;
      }, 300);
    },
          handleScroll() {
        var scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
        let box = this.$refs.searchBar
        // console.log("box.scrolltop:"+box.scrollTop+" box.offsetTop:"+box.offsetTop)
      }
  },
  created() {
      let menus = JSON.parse(DataUtil.menus());
      if(menus){
        this.menuList = menus;
      }else{
        this.getRoutes();
      }
  },

  mounted() {
    this.openFullScreen();
    this.box = this.$refs.searchBar
      var $this = this
      // 监听这个dom的scroll事件
      this.box.onscroll  = () => {
        $this.handleScroll()
      }
  },
  components: {
    mlChangePassword
  }
};
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.titlename{
    width: 65px;
    height: 60px;
    background: #ccc;
    background: #399bff;
    border-right: 1px solid rgba(0, 0, 0, 0.14);
}
.menuIcon {
    display: block;
    float: left;
    width: 25px;
    height: 25px;
}
.titlename:hover {
  background: rgba(49, 133, 219, 0.72);
}
.menuIcon i {
    width: 25px;
    display: block;
    height: 25px;
    margin: 0 20px;
    font-size: 20px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
.container {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
  .header {
    height: 60px;
    line-height: 60px;
    background: #ffffff;
    color: #000;
    .logo {
      /*min-width: 200px;*/
      max-width: 200px;
      height: 100%;
      background-color: #3185db;
      img {
        width: 40px;
        margin: 0 5px -15px 15px;
      }
      img:hover {
        transform: rotateY(-360deg);
        transition-property: all;
        transition-duration: 0.5s;
        transition-timing-function: ease-in-out;
        transition-delay: initial;
      }
      h1 {
        display: inline-block;
        vertical-align: -5px;
        color: #fafafa;
        font-size: 21px;
      }
      @keyframes masked-animation {
        0% {
          background-position: 0 0; /* background-position 属性设置背景图像的起始位置。 */
        }
        100% {
          background-position: -100% 0;
        }
      }
    }
    .conten-header {
      position: absolute;
      right: 0px;
      top: 0px;
      bottom: 0px;
      left: 200px;
      background: #fff;
      transition: left 0.2s;
      .breadcrumb-container {
          margin-bottom: 15px;
          background: #399bff;
          -webkit-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
          box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
        .logoutIco {
          color: #000;
          float: right;
          img {
            display: inline-block;
            margin-top: 10px;
            margin-bottom: -3px;
            margin-right: 5px;
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 10px;
          }
        }
      }
    }
    .conten-header-close {
      left: 60px;
      transition: left 0.2s;
    }
  }
  .main {
    background: #ffffff;
    position: absolute;
    top: 60px;
    bottom: 0px; /* overflow: hidden; */
    // 覆盖默认滚动条样式
    .test1::-webkit-scrollbar {
      width: 0px;
      height: 8px;
    }
    .test1::-webkit-scrollbar-track {
      opacity: 0;
      transition: opacity 0.12s ease-out;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius: 2em;
    }
    .test1::-webkit-scrollbar-thumb {
      /* background-color: rgb(178, 177, 176); */
      background-color: #545c64;
      /* opacity: 0; */
      transition: background-color 0.3s;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius: 2em;
    }
    aside.test1 {
      width: 200px;
      overflow-y: scroll;
      height: 100%;
      background-color: #545c64;
      transition: width 0.1s;
      .span {
        display: block;
        margin: 0 auto;
      }
      .userinfo {
        text-align: right;
        padding-right: 2%;
      }


    }
    aside.test1-close {
      width: 60px;
      transition: width 0.3s;
    }
    .content-container {
      background: #ffffff;
      position: absolute;
      right: 0px;
      top: 0px;
      bottom: 0px;
      left: 200px;
      overflow-y: scroll;
      padding: 20px;
      transition: left 0.2s;
      .breadcrumb-container {
        margin-bottom: 15px;
        .title {
          width: 200px;
          float: left;
          color: #475669;
        }
        .breadcrumb-inner {
          float: left;
        }
      }
      .content-wrapper {
        box-sizing: border-box;
      }
    }
    .content-container-close {
      left: 60px;
      transition: left 0.2s;
    }

  }
}

.el-menu-item.is-active,
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  background: rgba(0, 0, 0, 0.7);
}
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
